<template>
  <div>
    <div>
      <form action="">
        <el-select v-model="options.index" placeholder="类型" style="width: 100px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          placeholder="请输入查询内容"
          v-model="findInput"
          style="width:200px; margin-bottom:15px;" />
        <el-button type="primary" style="height: 40px;" @click="findByAny(options.index,findInput)" >查询</el-button>
<!--        <el-button type="primary" style="height: 40px;" @click="">返回</el-button>-->
        <el-button type="primary" style="height: 40px;" @click="addView=true">增加</el-button>
<!--        这种方法很好用，她既然是监听数值的变化而启动，那我们就变两次就一定会启动-->
      </form>
    </div>
    <el-table
      :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      border
      style="width: 100%;"
    >
      <el-table-column prop="date" label="Date" width="180" align="center" fixed>
        <template slot-scope="scope">
          {{scope.row.date}}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="Date" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.date}}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="Date" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.date}}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="Date" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.date}}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="Date" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.date}}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="Date" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.date}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="Address" align="center" width="300">
        <template slot-scope="scope">
          {{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <el-button type="success" plain size="small">修改</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next,jumper, ->, total"
      :total="tableData.length"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      style="text-align: center">
    </el-pagination>

<!--    增加item-->
    <el-dialog :visible.sync="addView"  :modal-append-to-body='false'>
      <add @func="getView" />
<!--      :addView="addView"-->
    </el-dialog>
  </div>
</template>

<script>
import add from './add'
export default {
  name: "index",
  components:{
    add
  },
  data(){
    const tableData = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },

    ]
    const options = [
      {
        label: '编号',
        value: 'id'
      }
      ,{
        label: '姓名',
        value: 'name'
      }
    ]
    let person={
      id: '',
      name: '',
      sex: '',
      tel: ''
    }
    return{
      findInput: '',  //这是查询输入框值
      currentPage: '1', //当前页 刷新后默认显示第一页
      pageSize: '8', //每一页显示的数据量 此处每页显示6条数据
      addView: false,
      tableData,options,person
    }
  },
  methods:{
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
    },
    //获取子组件传过来的值
    getView(data){
      this.addView = false
    }
  }
}
</script>

<style lang="less">
.el-table-column{
  text-align: center;
}

</style>
